<template>
  <view>
    <view class="alldiv">
      <view class="navdiv">
        <u-navbar back-text="返回" @leftClick="navigateBack" :leftText="language.join4s.nav"></u-navbar>
      </view>
      <view class="boxdiv">
        <u-cell-group>
          <u-cell center>
            <view slot="title" style="font-size: 16px; font-weight: bold; color: rgba(56, 56, 56, 1);">{{ language.join4s.title }}</view>
            <view slot="label">
              <u-form labelPosition="left">
                <u-form-item borderBottom :label="language.join4s.companyName">
                  <u-input :placeholder="language.join4s.companyPlaceholder" v-model="form.companyName"></u-input>
                </u-form-item>
                <u-form-item borderBottom :label="language.join4s.type"   >
                  <u-picker :show="typeShow" @confirm="confirmType" :columns="types"></u-picker>

                  <span @click="typeShow = true" v-if="form.serviceType==null">
                    <span  v-for="(item,index)  in types[0]"> {{ item }},</span>更多
                  </span>
                  <span v-else> {{ form.serviceType }}</span>
                </u-form-item>
                <u-form-item borderBottom :label="language.join4s.brand">
                  <u-input :placeholder="language.join4s.brandPlaceholder" v-model="form.brand"></u-input>
                </u-form-item>
                <u-form-item borderBottom :label="language.join4s.quantity">
                  <u-input :placeholder="language.join4s.quantityPlaceholder" v-model="form.quantity" type="number"></u-input>
                </u-form-item>
                <u-form-item borderBottom :label="language.join4s.city">

                  <u-picker :show="cityShow" @confirm="confirmCity" :columns="citys"></u-picker>

                  <span @click="cityShow = true" v-if="form.cities==null">
                    <span  v-for="(item,index)  in citys[0]"> {{ item }},</span>更多
                  </span>
                  <span v-else> {{ form.cities }}</span>
                </u-form-item>
                <u-form-item borderBottom :label="language.join4s.contactName">
                  <u-input :placeholder="language.join4s.contactNamePlaceholder" v-model="form.contactName"></u-input>
                </u-form-item>
                <u-form-item borderBottom :label="language.join4s.contactNumber">
                  <u-input :placeholder="language.join4s.contactNumberPlaceholder" v-model="form.contactPhone" type="tel"></u-input>
                </u-form-item>
                <u-form-item borderBottom :label="language.join4s.email">
                  <u-input :placeholder="language.join4s.emailPlaceholder" v-model="form.email" type="email"></u-input>
                </u-form-item>
<!--                uploadDocs-->
<!--                <u-form-item borderBottom :label="language.join4s.uploadDocs">-->
<!--                  <u-input :placeholder="language.join4s.uploadDocsPlaceholder" v-model="form.documentUpload" type="text" disabled></u-input>-->
<!--                </u-form-item>-->
<!--                otherContent-->
                <u-form-item borderBottom :label="language.join4s.otherContent">
                  <u-input :placeholder="language.join4s.otherContent" v-model="form.otherContent" type="textarea"></u-input>
                </u-form-item>
<!--                <FileUploader @uploadEnd="handleUploadEnd"></FileUploader>-->
                <!-- 其他表单项 -->
                <view class="btndiv">
                  <u-button :text="language.join4s.submitBtn" @click="submitForm"></u-button>
                </view>

              </u-form>
            </view>
          </u-cell>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>

import  { join4s ,queryCityEnumeration } from "../../http/jion4s/index"

// import FileUploader from '@/utils/FileUploader/FileUploader.vue';
import UForm from "../../uni_modules/uview-ui/components/u-form/u-form.vue";
import UFormItem from "../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";

export default {
  components: {
    UFormItem,
    UForm,
    // FileUploader
  },
  data() {
    return {

      form:{
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        id: 1,
        companyName: "易昌庭",
        serviceType: null,
        cities: null,
        contactName: "qiuqiu11",
        contactPhone: "18164709125",
        email: "2085632015@qq.com",
        otherContent: "备注",
        documentUpload: "/profile/upload/2024/03/21/ruoyi (11)_20240321163223A001.zip",
        agreementDownload: "/profile/upload/2024/03/21/ruoyi (11)_20240321163227A002.zip",
        approvalStatus: 0,
        rejectionReason: null
      },
      language: {
        // 初始值基于您的注释填充
        companyName: "公司名称",
        companyPlaceholder: "XXX有限公司",
        type: "类型",

        brand: "品牌",
        brandPlaceholder: "请填入品牌",
        quantity: "数量",
        quantityPlaceholder: "请填入站点数量",
        city: "所在城市",
        cities: ["北京", "上海", "杭州", "广州", "深圳"],
        contactName: "联系人姓名",
        contactNamePlaceholder: "张三",
        contactNumber: "联系方式",
        contactNumberPlaceholder: "请填入电话号码",
        email: "电子邮件",
        emailPlaceholder: "请填入电子邮件",
        submitBtn: "提交申请",
      },
      typeShow:false,
      cityShow:false,
      showSex: false,
      companyName: "",
      types:  [
        ['加油站', '顺风车', '自行车']
      ],
      citys:[["选择城市"]],
      brand: "",
      quantity: "",

      contactName: "",
      contactNumber: "",
      email: "",
      // 其他必要的数据属性
    };
  },
  methods: {

    // handleUploadEnd(url) {
    //   // 在这里处理上传结束后返回的URL
    //   console.log(url);
    //   this.form.documentUpload = url;
    // },
    queryCity(){

      queryCityEnumeration().then(res => {
            console.log(res)

            var city =[]

            res.data.forEach((item,index) => {
              city.push(item.dictValue)
            });

            this.citys=[city]
            console.log(this.citys)

          }
      )
    },
    confirmType(e){
      console.log(e)
      this.form.serviceType = e.value[0];
      this.typeShow = false;

    },
    confirmCity(e){
      console.log(e)
      this.form.cities= e.value[0];
      this.cityShow = false;
    },
    navigateBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    submitForm() {
      // 提交表单逻辑
      console.log(this.form)
      join4s(this.form).then(res=>{
        //返回到上一层目录
        uni.navigateBack({
          delta: 1,
          success: () => {
            // 返回成功后的回调函数
          },
          fail: () => {
            // 返回失败后的回调函数
          },
        });
      })
    },
    getlanguagedata() {
      // 获取和设置语言数据的逻辑
      this.language = this.$store.getters["internationalization/getinternationalization"];
    },
    // 其他必要的方法
  },

  onLaunch() {
    this.queryCity()
    console.log("Personalcenter Launch")
  },
  mounted() {
    this.getlanguagedata();
    this.queryCity()


  },
  onShow: function () {
    this.getlanguagedata();
    this.queryCity()
    console.log("Personalcenter Show");
  },
  onLoad() {

    this.getlanguagedata();
    this.queryCity()
  },


};
</script>

<style lang="less" scoped>
.alldiv {
  width: 100vw;
  height: 100vh;
  //   这个是返回
  .navdiv {
    width: 100%;
    height: 10%;
    overflow: hidden;
    z-index: 999999;
  }
  .boxdiv {
    width: 95%;
    height: 80%;
    margin: auto;
    border-radius: 16px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
  }
}
.btndiv {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/deep/ uni-page-head .uni-page-head {
  position: fixed;
  left: var(--window-left);
  right: var(--window-right);
  height: 44px;
  height: calc(44px + constant(safe-area-inset-top));
  height: calc(44px + env(safe-area-inset-top));
  padding: 7px 3px;
  padding-top: calc(7px + constant(safe-area-inset-top));
  padding-top: calc(7px + env(safe-area-inset-top));
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  overflow: hidden;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  box-sizing: border-box;
  z-index: 998;
  color: #fff;
  background-color: #b03535 !important;
  -webkit-transition-property: all;
  transition-property: all;
}

/deep/ .u-input--radius[data-v-113bc24f],
.u-input--square[data-v-113bc24f] {
  border-radius: 1px;
  width: 100% !important;
}
/deep/ .u-border {
  border: none; /* 移除默认边框 */
  // border-bottom: 2px solid rgba(217, 219, 218, 1); /* 下边框样式和颜色 */
}
/deep/ .u-form-item__body__left {
  width: 80px !important;
}
/deep/ .u-form-item__body__left__content__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  color: rgba(153, 153, 153, 1);
  font-size: 14px;
}
/deep/ .u-input.u-input--square {
  background-color: rgba(0, 0, 0, 0) !important;
  border: none;
}
/deep/ .u-button--info {
  color: #ffffff;
  font-weight: bold;
  width: 100px !important;
  background-color: rgba(47, 212, 184, 1);
  border-color: #ebedf0;
  border-radius: 6px;
  font-size: 15px;
  border-width: 1px;
  border-style: solid;
}
</style>
